
//written by zlt

//主题色
$titleColor: #004B9E; //
$linkColor: #5B79E7; // link
$labelColor: #69718B; // label
$mainTxtColor: #419eff;
$borderColor: #848ae3;
$ThemeColor: #848ae3;
//#FF4C4C
//.el-button--primary{
//  background: $titleColor;
//  border-color: $titleColor;
//}

//文字
.titleHead { font-size: 20px; color: #333; font-weight: 900;}
.titleHeadWhite { font-size: 20px; color: #fff; font-weight: 900;}
.titleLink { font-size: 16px; color: $titleColor;}
.titleTip { font-size: 40px; color: $titleColor; font-weight: 900;}

.mainTitle { font-size: 20px; color: #2e3233; font-weight: 900;}
.textTitle { font-size: 16px; font-weight: 900; color: #333;}
.textArticle { font-size: 14px; color: #555; line-height: 1.8;}
.textDetail { font-size: 14px; color: #888;}

//文字 白色
.mainTitleWhite { font-size: 20px; color: #fff;}
.textTitleWhite { font-size: 16px; color: #fff;}
.textArticleWhite { font-size: 14px; color: #fff; line-height: 1.8;}
.textDetailWhite { font-size: 12px; color: #fff;}

//基本样式
.colorTheme { color: $titleColor !important;} // 主题颜色
.colorLabel { color: $labelColor !important;} // 说明文字label颜色
.colorBorder { color: $borderColor !important;} // 说明文字label颜色
.colorLink{
  color: $linkColor;
  cursor: pointer;
  &:hover{
    color: $linkColor;
  }
}  // link辅助颜色
.colorWhite { color: #fff !important;}
.color333 { color: #333 !important;}
.color555 { color: #555 !important;}
.color666 { color: #666 !important;}
.color777 { color: #777 !important;}
.color888 { color: #888 !important;}
.color999 { color: #999 !important;}
.colorGold { color: #cfae68 !important;}
.colorYellow { color: #ffcc80 !important;}
.colorOrange { color: #f7b106 !important;}
.colorSuccess { color: #13ce66 !important;}
.colorDanger { color: #e85252 !important;}
.bgWhite { background: #fff !important;}
.bgSuccess { background: #79CB29 !important;}
.bgE { background: #eee !important;}
.bg999 { background: #999 !important; border-color: #999 !important;}
.bgF6 { background: #f6f6f6 !important;}
.bgF9 { background: #f9f9f9 !important;}
.bgGold { background: #cfae68 !important; color: #fff !important; border-color: #cfae68 !important;}
.fontWeight400 { font-weight: 400;}
.fontWeight500 { font-weight: 500;}
.fontWeight700 { font-weight: 700;}
.fontWeightBold { font-weight: 900;}
.fontStyleItalic { cursor: pointer; font-style: italic;}
.fontStyleUnset { font-style: unset;}
.textUnderLine { text-decoration: underline;}
.borderNone{ border: none;}
.border1px {
  border: 1px solid #999;
  border-radius: 2px;
}
.borderDDD1px {
  border: 1px solid #ddd;
  border-radius: 2px;
}
.borderBottom1px { border-bottom: 1px solid #e5e5e5;}
.borderBottom2px { border-bottom: 2px solid #e5e5e5;}
.borderRight2px { border-right: 2px solid #e5e5e5;}
.borderBottom1dash { border-bottom: 1px dashed #e5e5e5;}
.borderRightDashed { border-right: 1px dashed #e5e5e5;}
.textAlignCenter{ text-align: center;}
.textAlignLeft{ text-align: left;}
.textAlignRight{ text-align: right;}
.verticalAlignTop{ vertical-align: top;}
.verticalAlignMiddle{ vertical-align: middle;}
.overflowHidden{ overflow: hidden;}
.borderRadius4{ border-radius: 4px !important;}
.borderRadius6{ border-radius: 6px !important;}
.borderRadius10{ border-radius: 10px !important;}
.borderRadius20{ border-radius: 20px !important;}
.borderRadiusHalf{ border-radius: 50%;}
.positionRelative{ position: relative;}
.textIndent2em{ text-indent: 2em;}

//文字大小
.fontSize10{ font-size: 10px !important;}
.fontSize12{ font-size: 12px !important;}
.fontSize13{ font-size: 13px !important;}
.fontSize14{ font-size: 14px !important;}
.fontSize16{ font-size: 16px !important;}
.fontSize17{ font-size: 17px !important;}
.fontSize18{ font-size: 18px !important;}
.fontSize20{ font-size: 20px !important;}
.fontSize22{ font-size: 22px !important;}
.fontSize24{ font-size: 24px !important;}
.fontSize26{ font-size: 26px !important;}
.fontSize28{ font-size: 28px !important;}
.fontSize30{ font-size: 30px !important;}
.fontSize36{ font-size: 32px !important;}
.fontSize40{ font-size: 40px !important;}
.lineHeight-1{ line-height: 1 !important;}
.lineHeight20{ line-height: 20px !important;}
.lineHeight22{ line-height: 22px !important;}
.lineHeight24{ line-height: 24px !important;}
.lineHeight26{ line-height: 26px !important;}
.lineHeight32{ line-height: 32px !important;}
.lineHeight36{ line-height: 36px !important;}
.lineHeight40{ line-height: 40px !important;}

//width
.width50{ width: 50px !important;}
.width60{ width: 60px !important;}
.width98{ width: 98px !important;}
.width100{ width: 100px !important;}
.width110{ width: 110px !important;}
.width120{ width: 120px !important;}
.width140{ width: 140px !important;}
.width160{ width: 160px !important;}
.width200{ width: 200px !important;}
.width210{ width: 210px !important;}
.width230{ width: 230px !important;}
.width248{ width: 248px !important;}
.width250{ width: 250px !important;}
.width300{ width: 300px !important;}
.width320{ width: 320px !important;}
.width350{ width: 350px !important;}
.width400{ width: 400px !important;}
.width460{ width: 460px !important;}
.width480{ width: 480px !important;}
.width500{ width: 500px !important;}
.width600{ width: 600px !important;}
.width700{ width: 700px !important;}
.width800{ width: 800px !important;}
.width1000{ width: 1000px !important;}
.width1120{ width: 1120px !important;}
.width1160{ width: 1160px !important;}
.width1200{ width: 1200px !important;}
.width50Percent{ width: 50% !important;}
.width60Percent{ width: 60% !important;}
.width70Percent{ width: 70% !important;}
.width80Percent{ width: 80% !important;}
.width90Percent{ width: 90% !important;}
.width100Percent{ width: 100% !important;}
.maxWidth150{ max-width: 150px;}
.maxWidth280{ max-width: 280px;}
//height高度
.heightAuto{ height: auto !important;}
.height32{ height: 32px !important;}
.height36{ height: 36px !important;}
.height40{ height: 40px !important;}
.height50{ height: 50px !important;}
.height60{ height: 60px !important;}
.height75{ height: 75px !important;}
.height80{ height: 80px !important;}
.height95{ height: 95px !important;}
.height110{ height: 110px !important;}
.height148{ height: 148px !important;}
.height160{ height: 160px !important;}
.height170{ height: 170px !important;}
.height200{ height: 200px !important;}
.height235{ height: 235px !important;}
.height250{ height: 250px !important;}
.height330{ height: 330px !important;}
.height400{ height: 400px !important;}
.height440{ height: 440px !important;}
.height500{ height: 500px !important;}
.height600{ height: 600px !important;}
.height60Vh{ height: 60vh !important;}
.height65Vh{ height: 65vh !important;}
.height80Vh{ height: 80vh !important;}
.minHeight1025{ min-height: 1025px !important;}
//边距
.marginAuto{ margin-left: auto !important; margin-right: auto !important;}
.marginTop-1{ margin-top: -1px !important;}
.marginTop-20{ margin-top: -20px !important;}
.marginTop-60{ margin-top: -60px !important;}
.marginTop2{ margin-top: 2px !important;}
.marginTop5{ margin-top: 5px !important;}
.marginTop10{ margin-top: 10px !important;}
.marginTop15{ margin-top: 15px !important;}
.marginTop20{ margin-top: 20px !important;}
.marginTop24{ margin-top: 24px !important;}
.marginTop25{ margin-top: 25px !important;}
.marginTop30{ margin-top: 30px !important;}
.marginTop35{ margin-top: 35px !important;}
.marginTop42{ margin-top: 42px !important;}
.marginTop46{ margin-top: 46px !important;}
.marginTop50{ margin-top: 50px !important;}
.marginTop55{ margin-top: 55px !important;}
.marginTop70{ margin-top: 70px !important;}
.marginTop90{ margin-top: 90px !important;}
.marginTop120{ margin-top: 120px !important;}
.marginBottom0{ margin-bottom: 0px !important;}
.marginBottom5{ margin-bottom: 5px !important;}
.marginBottom10{ margin-bottom: 10px !important;}
.marginBottom15{ margin-bottom: 15px !important;}
.marginBottom18{ margin-bottom: 18px !important;}
.marginBottom20{ margin-bottom: 20px !important;}
.marginBottom30{ margin-bottom: 30px !important;}
.marginBottom40{ margin-bottom: 40px !important;}
.marginBottom200{ margin-bottom: 200px !important;}
.marginTB10{ margin-top: 10px !important; margin-bottom: 10px !important;}
.marginTB15{ margin-top: 15px !important; margin-bottom: 15px !important;}
.marginTB20{ margin-top: 20px !important; margin-bottom: 20px !important;}
.marginTB30{ margin-top: 30px !important; margin-bottom: 30px !important;}
.marginTB40{ margin-top: 40px !important; margin-bottom: 40px !important;}
.marginTB50{ margin-top: 50px !important; margin-bottom: 50px !important;}
.marginTB60{ margin-top: 60px !important; margin-bottom: 60px !important;}
.margin0{ margin: 0 !important;}
.margin10{ margin: 10px !important;}
.margin20{ margin: 20px !important;}
.marginLR5{ margin-left: 5px !important; margin-right: 5px !important;}
.marginLR10{ margin-left: 10px !important; margin-right: 10px !important;}
.marginLR15{ margin-left: 15px !important; margin-right: 15px !important;}
.marginLR20{ margin-left: 20px !important; margin-right: 20px !important;}
.marginLR30{ margin-left: 30px !important; margin-right: 30px !important;}
.marginLR40{ margin-left: 40px !important; margin-right: 40px !important;}
.marginLR60{ margin-left: 60px !important; margin-right: 60px !important;}
.marginLeft0{ margin-left: 0px !important;}
.marginLeft5{ margin-left: 5px !important;}
.marginLeft10{ margin-left: 10px !important;}
.marginLeft20{ margin-left: 20px !important;}
.marginLeft30{ margin-left: 30px !important;}
.marginLeft40{ margin-left: 40px !important;}
.marginLeft50{ margin-left: 50px !important;}
.marginLeft120{ margin-left: 120px !important;}
.marginLeft130{ margin-left: 130px !important;}
.marginLeft150{ margin-left: 150px !important;}
.marginRight0{ margin-right: 0px !important;}
.marginRight5{ margin-right: 5px !important;}
.marginRight10{ margin-right: 10px !important;}
.marginRight15{ margin-right: 15px !important;}
.marginRight20{ margin-right: 20px !important;}
.marginRight30{ margin-right: 30px !important;}
.marginRight40{ margin-right: 40px !important;}
.marginRight50{ margin-right: 50px !important;}
.marginRight150{ margin-right: 150px !important;}
.paddingTop5{ padding-top: 5px !important;}
.paddingTop10{ padding-top: 10px !important;}
.paddingTop15{ padding-top: 15px !important;}
.paddingTop20{ padding-top: 20px !important;}
.paddingTop25{ padding-top: 25px !important;}
.paddingTop30{ padding-top: 30px !important;}
.paddingTop40{ padding-top: 40px !important;}
.paddingTop80{ padding-top: 80px !important;}
.paddingBottom10{ padding-bottom: 10px !important;}
.paddingBottom15{ padding-bottom: 15px !important;}
.paddingBottom20{ padding-bottom: 20px !important;}
.paddingBottom30{ padding-bottom: 30px !important;}
.paddingBottom60{ padding-bottom: 60px !important;}
.paddingLeft0{ padding-left: 0px !important;}
.paddingLeft10{ padding-left: 10px !important;}
.paddingLeft20{ padding-left: 20px !important;}
.paddingLeft30{ padding-left: 30px !important;}
.paddingLeft40{ padding-left: 40px !important;}
.paddingLeft60{ padding-left: 60px !important;}
.paddingRight0{ padding-right: 0 !important;}
.paddingLR10{ padding-left: 10px !important; padding-right: 10px !important;}
.paddingLR15{ padding-left: 15px !important; padding-right: 15px !important;}
.paddingLR20{ padding-left: 20px !important; padding-right: 20px !important;}
.paddingLR30{ padding-left: 30px !important; padding-right: 30px !important;}
.paddingLR40{ padding-left: 40px !important; padding-right: 40px !important;}
.paddingTB0{ padding-top: 0 !important; padding-bottom: 0 !important;}
.padding0{ padding: 0px !important;}
.padding10{ padding: 10px !important;}
.padding15{ padding: 15px !important;}
.padding20{ padding: 20px !important;}
.padding30{ padding: 30px !important;}
.padding40{ padding: 40px !important;}
.padding60{ padding: 60px !important;}
.paddingTB10{ padding-top: 10px !important; padding-bottom: 10px !important;}
.paddingTB15{ padding-top: 15px !important; padding-bottom: 15px !important;}
.clearfix:after{
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.displayBlock{ display: block;}
.displayInline{ display: inline;}
.displayInlineBlock{ display: inline-block;}
.fl{ float: left;}
.fr{ float: right;}
.boxShadow{ box-shadow: 0 0 6px rgba(0,0,0,.1)}
.boxShadowLarge{ box-shadow: 0 0 10px #e9e9e9;}
.objectFitCover{ object-fit: cover;}
.objectFitContain{ object-fit: contain;}
//一行缩略
.textOverFlowOne{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
//两行缩略
.textOverFlowTwo{
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  //height: 50px;
}
//三行缩略
.textOverFlowThree{
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
//四行缩略
.textOverFlowFour{
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.widthMax{ width: 100% !important;}
//flex布局，上下左右垂直居中
.flexCenterBox{ display: flex; justify-content: center; align-items: center}
//flex布局，从左排列
.flexRowStart{ display: flex; flex-direction: row; justify-content: flex-start;}
.flexRowCenter{ display: flex; flex-direction: row; justify-content: center;}
//flex布局，左右排列
.flexRowBetween{ display: flex; flex-direction: row; justify-content: space-between;}
.flexRowAround{ display: flex; flex-direction: row; justify-content: space-around;}
//下排列
.alignItemsEnd{ align-items: flex-end;}
.cursor{ cursor: pointer;}

.loading1{
  display: flex;
  align-items: center;
  padding: 24px 20px;
  width: fit-content;
  height: 20px;
  background: #fff;
  .demo1 {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #848ae3;
    float: left;
    margin: 0 3px;
    animation: demo1 linear 1s infinite;
    -webkit-animation: demo1 linear 1s infinite;
  }
  .demo1:nth-child(1){
    animation-delay:0s;
  }
  .demo1:nth-child(2){
    animation-delay:0.15s;
  }
  .demo1:nth-child(3){
    animation-delay:0.3s;
  }
  .demo1:nth-child(4){
    animation-delay:0.45s;
  }
  .demo1:nth-child(5){
    animation-delay:0.6s;
  }
}

@keyframes demo1{
  0%,60%,100% {transform: scale(1);}
  30% {transform: scale(2.5);}
}
@-webkit-keyframes demo1{
  0%,60%,100% {transform: scale(1);}
  30% {transform: scale(2.5);}
}
